<script lang="ts" setup >
import { getCurrentInstance, ref } from 'vue'
import { useStore } from 'vuex'
const { proxy } = getCurrentInstance()
const store = useStore()
const username = ref(store.state.userStore.userInfo.data.username)

const update = () => {
  proxy.$router.push('newpassword')
}
const gotoArticle = () => {
  proxy.$router.push('ArticleList')
}

const gotoPost = () => {
  proxy.$router.push('postArticle')
}

const gotoUser = () => {
  proxy.$router.push('userall')
}

// import {
//   Document,
//   Menu as IconMenu,
//   Location,
//   Setting,
// } from '@element-plus/icons-vue'

// const handleOpen = (key: string, keyPath: string[]) => {
//   console.log(key, keyPath)
// }
// const handleClose = (key: string, keyPath: string[]) => {
//   console.log(key, keyPath)
// }
// import { getRequest } from '../utils/api'
// export default {
//   methods: {
//     handleCommand (command) {
//       if (command === 'logout') {
//         this.$confirm('注销登录吗？', '提示', {
//           confirmButtonText: '确定',
//           canceBUttonText: '取消',
//           type: 'warning'
//         }).then(function () {
//           getRequest('/logout')
//           this.currentUserName = '游客'
//           this.$router.replace({ path: '/' })
//         }, function () {
//           // 取消
//         })
//       }
//     }
//   },
//   data () {
//     return {
//       currentUserName: ''
//     }
//   }
// }
</script>

<template>
<!-- Element-plus布局 -->
  <el-container class="home_container">
      <el-header>
        <div class="home_title">博客管理平台</div>
        <!-- Element-plus布局之下拉菜单 -->
        <div class="home_userinfoContainer">
          <el-dropdown>
          <span class="link_userinfo">
            {{username}}
            <el-icon class="el-icon--right"><arrow-down /></el-icon>
          </span>
          <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="sysMsg">系统消息</el-dropdown-item>
            <el-dropdown-item command="MyArticle">我的主页</el-dropdown-item>
            <el-dropdown-item command="updatePassWord" @click="update">修改密码</el-dropdown-item>
            <el-dropdown-item command="out">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
          </el-dropdown>

        </div>
      </el-header>

      <el-container>
        <el-aside width="200px">
           <!-- <el-col :span="12"> -->
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"

      >
        <el-sub-menu index="1">
          <template #title>
           <el-icon><document /></el-icon>
            <span>文章管理</span>
          </template>

          <el-menu-item-group >
            <el-menu-item index="1-1" @click="gotoArticle"> 文章列表</el-menu-item>
            <el-menu-item index="1-2" @click="gotoPost">发表文章</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
        <el-menu-item index="2">
        <el-icon><User /></el-icon>
          <span @click="gotoUser">用户管理</span>
        </el-menu-item>

     </el-menu>
    <!-- </el-col> -->
        </el-aside>

        <el-main>
            <el-main>
          <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/homeview' }">首页</el-breadcrumb-item>
           <el-breadcrumb-item   v-text="proxy.$router.currentRoute.value.name"  ></el-breadcrumb-item>
          </el-breadcrumb>
          <router-view></router-view>
        </el-main>
        </el-main>
      </el-container>

    </el-container>

</template>

<style scoped>
.home_container{
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  width:100%
}

  .el-header {
    background-color: #20a0ff;
    color: #333;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
   .el-aside {
    background-color: #ECECEC;
  }

  .el-main {
    background-color: #fff;
    color: #000;
    text-align: center;
  }

  .home_title {
    color: #fff;
    font-size: 22px;
    display: inline;
  }

  .home_userinfo {
    color: #fff;
    cursor: pointer;
  }

  .home_userinfoContainer {
    display: inline;
    margin-right: 20px;
  }
  .top{

  }

</style>
